<template>
	<view>
		<view class="Detail-Conetnt">
			<image class="bg" src="http://img.curiousmore.com/tmp/wx2f4eaeb7b745ba4e.o6zAJs2bel8UMMafp-gtnT7OfHzo.MbnTEnikWqPN47b36d29885799816e6230755e5a108f.png" mode=""></image>
			<view class="Videointroduction" v-for="(item,index) in DetailList" :key="index">
				<view class="Vider">
					<video id="myVideo" 
					:src="item[0].mother_tongue_url"
					@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls>
						<view>{{item[0].language}}</view>
					</video>
				</view>
				<view class="Detial-meau">
					<view class="Detial-titles">
						<view v-for="(items,indexs) in DelailMeau" :class="{activeNav : DelailUIndex == indexs}" :key="indexs" @tap="SelsctMeau(indexs)">{{items}}</view>
					</view>
					
					<scroll-view class="Detial-meauinfo" scroll-y="true">
						<scroll-view v-if="DelailUIndex == '0'" class="Detial-meauinfolist">
							<view class="student-infor">							
								<view class="Detail-lists">
									<text>{{item[0].type}}/{{item[0].mother_tongue}}</text>
								</view>
								<view class="Detail-lists">
									<text>评分</text>
									<text>{{item[0].score}}</text>
								</view>
								<view class="Detail-lists">
									<text>自我介绍</text>
									<text>{{item[0].introduction}}</text>
								</view>
								<view class="Detail-lists">
									<text>性别</text>
									<text v-if="item[0].sex == 1">男</text>
									<text v-else-if="item[0].sex == 2">女</text>
								</view>
								<view class="Detail-lists">
									<text>国籍</text>
									<text>{{item[0].nationality}}</text>
								</view>
								<view class="Detail-lists">
									<text>掌握语言</text>
									<text>{{item[0].language}}</text>
								</view>
								<view class="Detail-lists">
									<text>身份</text>
									<text>{{item[0].identity}}</text>
								</view>
								<view class="Detail-lists">
									<text>毕业学校</text>
									<text>{{item[0].graduation_school}}</text>
								</view>
								<view class="Detail-lists">
									<text>学历</text>
									<text>{{item[0].education}}</text>
								</view>
								<view class="Detail-lists">
									<text>专业</text>
									<text>{{item[0].specialty}}</text>
								</view>
							</view>
						</scroll-view>
						<scroll-view v-else-if="DelailUIndex == '1'">
							<view>
								<view id="panel" class="flex-column">
									<view class="flex-cell flex-row">
										<text class="flex-cell flex-row">{{Thecurrentmonth}}</text>
										<text class="flex-cell flex-row" style="height: 5vh;flex: 1.5;flex-wrap: wrap;line-height: 5vh;">第四周</text>
										<text class="flex-cell flex-row" style="height: 5vh;flex: 1.5;flex-wrap: wrap;line-height: 5vh;">课节</text>
									</view>
									<view class="flex-row flex-cell">
										<text class="flex-cell flex-row">周一{{WeekDay1}}</text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
									</view>
									<view class="flex-row flex-cell">
										<text class="flex-cell flex-row">周二{{WeekDay2}}</text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
									</view>
									<view class="flex-row flex-cell">
										<text class="flex-cell flex-row">周三{{WeekDay3}}</text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
									</view>
									<view class="flex-row flex-cell">
										<text class="flex-cell flex-row">周四{{WeekDay4}}</text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
									</view>	
									<view class="flex-row flex-cell">
										<text class="flex-cell flex-row">周五{{WeekDay5}}</text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
									</view>
									<view class="flex-row flex-cell">
										<text class="flex-cell flex-row">周六{{WeekDay6}}</text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
									</view>
									<view class="flex-row flex-cell">
										<text class="flex-cell flex-row">周日{{WeekDay7}}</text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
										<text class="flex-cell flex-row"></text>
									</view>
								</view>	
							</view>
						</scroll-view>
						<scroll-view v-else-if="DelailUIndex == '2'">暂无数据</scroll-view>
					</scroll-view>
				</view>
			</view>
			<view class="ChatButton" @tap="SendChat">聊一聊</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id:'',
				DetailList:[],
				DelailMeau:['基础材料','课程表','评论'],
				DelailUIndex:'0',
				Thecurrentmonth:'',//当前日月
				WeekDay1:'',
				WeekDay2:'',
				WeekDay3:'',
				WeekDay4:'',
				WeekDay5:'',
				WeekDay6:'',
				WeekDay7:'',
				queryScheduleList:[],
			}
		},
		onLoad(e) {
			this.user_id = e.user_id
			console.info(this.user_id,'���ð�')
			this.GetDeilList()
		},
		onReady: function(res) {
		    this.videoContext = uni.createVideoContext('myVideo')
			this.videoContext.requestFullScreen();
		},
		methods: {
			GetDeilList(){
				let _this = this
				let data ={
					user_id:this.user_id,
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'masterInfo',
					actionName: 'query',
					data: data,
					successBack: function(res) {
						// _this.DetailList = res.data.data
						_this.DetailList.push(res.data.data)
						console.log(typeof _this.DetailList)
						console.log(_this.DetailList)
					},
				})
			},
			SelsctMeau(e){//tabs选项卡切换
				let _this =this
				_this.DelailUIndex = e
				if(_this.DelailUIndex == 1){
					var date = new Date();
					let Y = date.getFullYear()
					let M = date.getMonth() + 1
					let D = date.getDate()
					let W = date.getDay(); 
					let T = date.toLocaleTimeString();				
					_this.Thecurrentmonth = Y+'-'+M
					if(W == 0){//星期天
						let Ds = D-6
						_this.WeekDay1 = M+'-'+Ds
						_this.WeekDay2 = M+'-'+(Ds-5)
						_this.WeekDay3 = M+'-'+(Ds-4)
						_this.WeekDay4 = M+'-'+(Ds-3)
						_this.WeekDay5 = M+'-'+(Ds-2)
						_this.WeekDay6 = M+'-'+(Ds-1)
						_this.WeekDay7 = M+'-'+D
					}else if(W == 1){//星期一
						_this.WeekDay1 = M+'-'+D
						_this.WeekDay2 = M+'-'+(D+1)
						_this.WeekDay3 = M+'-'+(D+2)
						_this.WeekDay4 = M+'-'+(D+3)
						_this.WeekDay5 = M+'-'+(D+4)
						_this.WeekDay6 = M+'-'+(D+5)
						_this.WeekDay7 = M+'-'+(D+6)
					}else if(W == 2){//星期二
						_this.WeekDay1 = M+'-'+(D-1)
						_this.WeekDay2 = M+'-'+(D)
						_this.WeekDay3 = M+'-'+(D+1)
						_this.WeekDay4 = M+'-'+(D+2)
						_this.WeekDay5 = M+'-'+(D+3)
						_this.WeekDay6 = M+'-'+(D+4)
						_this.WeekDay7 = M+'-'+(D+5)
					}else if(W == 3){//星期三
						_this.WeekDay1 = M+'-'+(D-2)
						_this.WeekDay2 = M+'-'+(D-1)
						_this.WeekDay3 = M+'-'+(D)
						_this.WeekDay4 = M+'-'+(D+1)
						_this.WeekDay5 = M+'-'+(D+2)
						_this.WeekDay6 = M+'-'+(D+3)
						_this.WeekDay7 = M+'-'+(D+4)
					}else if(W == 4){//星期四
						_this.WeekDay1 = M+'-'+(D-3)
						_this.WeekDay2 = M+'-'+(D-2)
						_this.WeekDay3 = M+'-'+(D-1)
						_this.WeekDay4 = M+'-'+(D)
						_this.WeekDay5 = M+'-'+(D+1)
						_this.WeekDay6 = M+'-'+(D+2)
						_this.WeekDay7 = M+'-'+(D+3)
					}else if(W == 5){//星期五
						_this.WeekDay1 = M+'-'+(D-4)
						_this.WeekDay2 = M+'-'+(D-3)
						_this.WeekDay3 = M+'-'+(D-2)
						_this.WeekDay4 = M+'-'+(D-1)
						_this.WeekDay5 = M+'-'+(D)
						_this.WeekDay6 = M+'-'+(D+1)
						_this.WeekDay7 = M+'-'+(D+2)
					}else if(W == 6){//星期六
						_this.WeekDay1 = M+'-'+(D-5)
						_this.WeekDay2 = M+'-'+(D-4)
						_this.WeekDay3 = M+'-'+(D-3)
						_this.WeekDay4 = M+'-'+(D-2)
						_this.WeekDay5 = M+'-'+(D-1)
						_this.WeekDay6 = M+'-'+(D)
						_this.WeekDay7 = M+'-'+(D+1)
					}
				}
			},
			SendChat(){//聊天页面
				uni.navigateTo({
					url:'/pages/Friend/chat/chat?item='+this.user_id+'&item=9191&chatType=C2C&MsgSeq=9844373'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.Detail-Conetnt{
		display: flex;
		width: 100%;
		height: 100%;
	}
	.bg {
		height: 410upx;
		width: 100%;
		position: fixed;
		top: 0upx;
	}
	.Videointroduction{
		display: flex;
		width: 100%;
		height: 80%;
		align-items: center;
		justify-content: center;
		text-align: center;
		margin-top: 120upx;
		z-index: 100;
		flex-wrap: wrap;
	}
	.Vider{
		display: flex;
		background: #EEEEEE;
		width: 80%;
		height: 500upx;
		border-radius: 30upx;
	}
	#myVideo{
		display: flex;
		width: 100%;
		height: 100%;
		border-radius:20upx;
		view{
			width: 140upx;
			height: 20upx;
			color: #006EFF;
			background: #06C1AE;
			margin-left: auto;
			margin-right: 60upx;
			margin-top: 40upx;
			font-size: 22upx;
			padding-top: 20upx;
			border-radius: 8upx;
			overflow: hidden;
		}
	}
	/*tabs样式*/
	.Detial-meau{
		position: relative;
		width: 100%;
		height: 650upx;
		background: #FFFFFF;
		color: #000;
	}
	.Detial-titles{
		display: flex;
		width: 100%;
		height: 16%;
		flex-wrap: wrap;
		align-content: flex-center;
		align-items: center;
		justify-content: space-around;
		view{
			display: flex;
			height: 120upx;
			align-items: center;
			justify-content: center;
		}
	}
	.Detial-meauinfo{
		position: relative;
		width: 100%;
		height: 74%;
		margin-top: 40upx;
		overflow: hidden;
		font-size: 26upx;
	}
	.activeNav{/*tabs点击后的样式*/
		color: #00BCBB;
		border-bottom: 3upx solid #00BCBB;
	}
	.Detail-lists{
		display: flex;
		width: 90%;
		height: 100upx;
		margin: 0 auto;
		border-top: 1px #DCDCDC solid;
		align-items: center;
		justify-content: space-between;
	}
	.student-infor{
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.ChatButton{
		width: 90%;
		height: 60upx;
		background: #00BCBB;
		border-radius: 10rpx;
		text-align: center;
		margin: 0 auto;
		position: fixed;
		left: 5%;
		bottom: 40upx;
	}
	
	/*表格样式*/
	#panel{
	  width: 100%;
	  background:#fff;
	}
	
	#panel text{
		line-height: 9vh;
		border: 1px solid #00BCBB;
	}
	
	.flex-row{
	  display: flex;
	  flex-direction: row;
	  justify-content: center;
	}
	.flex-column{
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: stretch;
	}
	
	.flex-cell{
	  flex: 1;
	}
</style>
